<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="https://javamana.com/2021/12/20211202222943885Q.html">JavaScript基礎之 AJAX體驗（演示步驟，黏貼即可運行）</a>
    <h1>post請求回去數據</h1>
    <button id="ocl">點擊</button>
    <div id="data">
    </div>
    <script>
        const divdata = document.getElementById("data");
        const buttonclick = document.getElementById("ocl");
        const tabledata = document.createElement("table");
        buttonclick.onclick = function () {
            const xhr = new XMLHttpRequest();
            //自己寫的原生Ajax在發送post請求的時候需要加入這個請求頭 等於告訴服務器自己發送的參數a=1&b=1對應的是鍵值對參數。
            // 為什麼不直至寫鍵值對，的原因是這樣更方便。
            // 知道自己傳輸的數json，所以直接用這種方式了不用 xhr.responseText 獲得字符串，然後再轉json了
            xhr.responseType = "json";
            xhr.open("POST", "http://127.0.0.1:8000/", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send("a=1&b=1");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    const jsondata = xhr.response;
                    for (let i = 1; i < jsondata.length; i++) {
                        const obj = jsondata[i];
                        const name = obj["name"]
                        const age = obj["age"];
                        // console.log(obj);
                        // console.log(name);
                        // console.log(age);
                        // 這個地方是js的document操作html元素 如果需要後期再聊一寫html和document吧

                        const tre = document.createElement("tr");
                        const td1 = document.createElement("td");
                        td1.append(name);
                        const td2 = document.createElement('td');
                        td2.append(age);
                        tre.append(td1);
                        tre.append(td2);
                        tabledata.append(tre)
                    }
                    divdata.append(tabledata)
                }
            }
        };
    </script>
</body>
</html>